<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center">
          {{ $t("my.safe.realName") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="grace-body" v-if="certifyForm.status < 1">
      <!-- <view class="grace-idcard-desc grace-margin-top">
            请上传原始比例身份证正反面照，保持图片清晰度不可勿涂改裁切， 保证审核通过率!
          </view> -->
      <view class="grace-title grace-margin-top color-w">
        {{ $t("my.safe.idcardObverse") }}
      </view>
      <view
        class="grace-idcard-items grace-img-in grace-rows grace-flex-center"
      >
        <image
          class="grace-idcard-items-image"
          :src="certifyForm.obverse || '/static/auth/certify/obverse.png'"
          @tap="selectObverse"
          mode="aspectFit"
        ></image>
      </view>
      <view class="grace-title grace-margin-top color-w">
        {{ $t("my.safe.idcardReverse") }}
      </view>
      <view
        class="grace-idcard-items grace-img-in grace-rows grace-flex-center"
      >
        <image
          class="grace-idcard-items-image"
          :src="certifyForm.reverse || '/static/auth/certify/reverse.png'"
          @tap="selectReverse"
          mode="aspectFit"
        ></image>
      </view>

      <view
        class="grace-border-radius-small grace-margin-top grace-padding"
        style="background: #121624"
      >
        <form class="grace-form" style="margin-top: 25px">
          <view class="grace-form-item grace-border-b">
            <text
              class="grace-icons icon-txt grace-form-icon grace-blue"
            ></text>
            <text class="grace-form-label color-w">{{
              $t("my.safe.name")
            }}</text>
            <view class="grace-form-body">
              <input
                type="text"
                v-model="certifyForm.name"
                :disenable="certifyForm.status > 0"
                class="grace-form-input"
                name="name"
                :placeholder="$t('my.safe.inputName')"
                placeholder-class="color-w"
              />
            </view>
          </view>
          <view class="grace-form-item grace-border-b">
            <text
              class="grace-icons icon-menu grace-form-icon grace-blue"
            ></text>
            <text class="grace-form-label color-w">
              {{ $t("my.safe.typeOfCertificate") }}
            </text>
            <view class="grace-form-body">
              <picker
                class="grace-form-picker"
                :disenable="certifyForm.status > 0"
                @change="changeCertifyType"
                :value="certifyTypeIndex"
                :range="certifyTypeList"
                name="gender"
              >
                <text class="grace-text color-w">{{
                  certifyTypeList[certifyTypeIndex]
                }}</text>
                <text
                  class="grace-icons icon-arrow-down"
                  style="margin-left: 5px"
                ></text>
              </picker>
            </view>
          </view>
          <view class="grace-form-item grace-border-b">
            <text
              class="grace-icons icon-user grace-form-icon grace-blue"
            ></text>
            <text class="grace-form-label color-w">
              {{ $t("my.safe.idNumber") }}
            </text>
            <view class="grace-form-body">
              <input
                type="text"
                v-model="certifyForm.number"
                :disenable="certifyForm.status > 0"
                class="grace-form-input"
                name="number"
                placeholder-class="color-w"
                :placeholder="$t('my.safe.inputIdNumber')"
              />
            </view>
          </view>
        </form>
      </view>

      <view class="grace-margin-top mb-80">
        <view
          v-if="certifyForm.status === -1"
          class="grace-button grace-red text-center grace-border-radius color-w"
          >{{ $t("my.safe.verified_fail") }}</view
        >
        <button
          v-if="certifyForm.status === 0"
          type="warn"
          class="grace-button grace-border-radius color-w"
        >
          {{ $t("common.status.under_review") }}
        </button>
        <button
          v-else-if="certifyForm.status === 2"
          type="success"
          class="grace-button grace-border-radius color-w"
        >
          {{ $t("common.status.passed") }}
        </button>
        <button
          v-else
          :loading="loading['user.certify.post']"
          :disabled="loading['user.certify.post']"
          type="primary"
          class="grace-button grace-border-radius"
          @tap="uploadCards"
        >
          {{ $t("common.operate.upload") }}
        </button>
      </view>
    </view>
    <view class="" v-if="certifyForm.status === 1">
      <view
        class="s-head cloud-header-bg grace-flex grace-flex-center grace-flex-vcenter"
      >
        <view>
          <image
            class="certify-success"
            src="/static/auth/certify/success.png"
          ></image>
          <view class="mt-40 mb-40 grace-white">
            {{ $t("my.safe.verified_success") }}
          </view>
        </view>
      </view>
      <view
        class="photos"
        style="margin: -50rpx 25rpx 0rpx 25rpx; padding: 0rpx"
      >
        <view class="grace-flex grace-space-between item grace-border-b">
          <view>{{ $t("my.safe.name") }}</view>
          <view>{{ certifyForm.name }}</view>
        </view>
        <view class="grace-flex grace-space-between item grace-border-b">
          <view>{{ $t("my.safe.idNumber") }}</view>
          <view>{{ certifyForm.number }}</view>
        </view>
        <view class="grace-flex grace-space-between item">
          <view>{{ $t("my.safe.typeOfCertificate") }}</view>
          <view>{{ $t("common.title.idcrad") }}</view>
        </view>
      </view>
    </view>
  </cloudPage>
</template>
<script>
var graceChecker = require("../../graceUI/jsTools/graceChecker.js");
import { mapActions, mapState } from "vuex";
import { isEmpty } from "lodash-es";
export default {
  data() {
    return {
      certifyTypeIndex: 0,
      certifyForm: {
        name: "",
        number: "",
        certify_type: "1",
        obverse: "",
        reverse: "",
        status: null,
      },
    };
  },
  computed: {
    certifyTypeList() {
      return [this.$t("common.title.idcrad")];
    },
  },
  async created() {
    const data = await this.loadUserCertify();
    this.certifyForm = isEmpty(data) ? this.certifyForm : data;
  },
  methods: {
    ...mapActions("user", ["saveUserCertify", "loadUserCertify"]),
    ...mapActions("system", ["upload"]),
    ...mapActions("media", ["upload"]),
    changeCertifyType() {},
    selectObverse() {
      if (this.certifyForm.status > 0) {
        return false;
      }
      uni.chooseImage({
        count: 1,
        success: async (params) => {
          console.log(params);
          let res = await this.upload(params);
          if (res.statusCode == 200) {
            this.certifyForm.obverse = res.url;
          }
        },
      });
    },
    selectReverse() {
      if (this.certifyForm.status > 0) {
        return false;
      }
      uni.chooseImage({
        count: 1,
        success: async (params) => {
          let res = await this.upload(params);
          if (res.statusCode == 200) {
            this.certifyForm.reverse = res.url;
          }
        },
      });
    },
    async uploadCards() {
      if (this.certifyForm.status > 0) {
        return false;
      }
      var rule = [
        {
          name: "name",
          checkType: "string",
          checkRule: "2,5",
          errorMsg: this.$t("my.safe.nameFail"),
        },
        {
          name: "number",
          checkType: "string",
          checkRule: "18",
          errorMsg: this.$t("my.safe.idNumberFail"),
        },
      ];
      var checkRes = graceChecker.check(this.certifyForm, rule);
      if (!checkRes) {
        this.makeToast({ title: graceChecker.error, icon: "none" });
        return false;
      }

      if (
        isEmpty(this.certifyForm.obverse) ||
        isEmpty(this.certifyForm.reverse)
      ) {
        this.makeToast({
          title: this.$t("my.safe.uploadIDPhoto"),
          icon: "none",
        });
        return;
      }
      // 临时文件地址保存在 this.obverse 和 this.reverse
      // 请调用  uni.uploadFile api 完成上传工作
      const res = await this.saveUserCertify(this.certifyForm);
      this.certifyForm = res;
      this.certifyForm.status = parseInt(this.certifyForm.status);
      this.makeToast({ title: this.$t("common.tips.submitted"), icon: "none" });
    },
  },
};
</script>
<style>
.grace-idcard-main {
  margin: 25rpx;
  color: #fff;
}
.grace-idcard-desc {
  color: #fff;
  line-height: 56rpx;
  font-size: 26rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}
.grace-idcard-text {
  line-height: 1.8em;
  margin-top: 30rpx;
  color: #fff;
}
.grace-idcard-items {
  background-color: #121624;
  padding: 50rpx;
  border-radius: 10rpx;
  margin-top: 15rpx;
}
.grace-idcard-items-image {
  width: 398rpx;
}

/* 成功页面 */
.cloud-header-bg {
  background: #343a45;
}
.photos,
.user-info {
  width: 700rpx;
  margin-top: 25rpx;
  padding: 40rpx 0rpx;
  background: #ffffff;
  box-shadow: 0px 1rpx 10rpx 0px rgba(150, 150, 150, 0.1);
  border-radius: 10rpx;
}
.s-head {
  width: 100%;
  height: 385rpx;
}
.certify-success {
  width: 242rpx;
  height: 174rpx;
}
.photos .item {
  padding: 10rpx 25rpx;
  height: 80rpx;
  line-height: 80rpx;
}
</style>
